<header class="header-container" ng-include="'/partials/header.html'"></header>
<div class="middle-container issues-content">
    <div class="new-issue">
        <a class="button new-button" gm-modal="#new-issue-modal"
           ng-click="ctrl.openCreateIssueForm()" data-icon="a" i18next="issues.new-issue">New issue</a>
        <a class="button refresh-button" ng-click="ctrl.refreshAll()" data-icon="x"
            ng-class="{active: refreshing}" i18next="issues.refresh">Refresh</a>
        <a class="button graphs-button" data-icon="k" ng-click="ctrl.toggleShowGraphs()"
            ng-class="{'active': showGraphs}" i18next="issues.graphs">Graphs</a>
        <a class="button tags-button" data-icon="f" ng-click="showTags = !showTags"
            ng-class="{'active': showTags}" i18next="issues.tags-button">Tags</a>
    </div>
    <div class="graph-box" ng-show="showGraphs">
        <div class="graph-container">
            <p i18next="issues.issues-by-status">Issues by status</p>
            <div class="graph" gm-issues-pie-graph="issuesStats.issues_per_status"></div>
        </div>
        <div class="graph-container">
            <p i18next="issues.issues-by-severity">Issues by severity</p>
            <div class="graph" gm-issues-pie-graph="issuesStats.issues_per_severity"></div>
        </div>
        <div class="graph-container">
            <p i18next="issues.issues-by-priority">Issues by priority</p>
            <div class="graph" gm-issues-pie-graph="issuesStats.issues_per_priority"></div>
        </div>
        <div class="graph-container">
            <p i18next="issues.issues-by-owner">Issues by owner</p>
            <div class="graph" gm-issues-pie-graph="issuesStats.issues_per_owner"></div>
        </div>
        <div class="graph-container">
            <p i18next="issues.issues-by-assigned-to">Issues by assigned to</p>
            <div class="graph" gm-issues-pie-graph="issuesStats.issues_per_assigned_to"></div>
        </div>
    </div>
    <div class="graph-box" ng-show="showGraphs">
        <div class="graph-container lines">
            <p i18next="issues.open-by-severity-progression">Open issues by severity progression</p>
            <div class="graph" gm-issues-accumulated-graph="issuesStats.last_four_weeks_days.by_severity"></div>
        </div>
        <div class="graph-container lines">
            <p i18next="issues.open-by-priority-progression">Open issues by priority progression</p>
            <div class="graph" gm-issues-accumulated-graph="issuesStats.last_four_weeks_days.by_priority"></div>
        </div>
    </div>
    <div class="graph-box" ng-show="showGraphs">
        <div class="graph-container lines">
            <p i18next="issues.open-closed-per-day">Open/Closed issues per day</p>
            <div class="graph" gm-issues-open-closed-graph="issuesStats.last_four_weeks_days.by_open_closed"></div>
        </div>
    </div>
    <div class="filters-container">
        <div class="filters-bar-sbox">
            <div class="title-sbox">
                <div class="title">
                    <a data-icon="B" href="" ng-class="{active: filtersOpened}"
                       ng-click="filtersOpened=!filtersOpened"
                       i18next="issues.filters">
                        Filters
                    </a>
                </div>

                <div class="tags-list-sbox"
                     gm-selected-filters-renderer="ctrl.selectedFilters"
                     gm-toggle-filter-callback="ctrl.toggleFilter(tag)">
                </div>
            </div>
            <ul class="filters-visual-box" ng-show="filtersOpened">
                <li ng-show="filters.statuses.length > 0">
                    <h3 i18next="issues.status">Status:</h3>
                    <div class="tags-list-sbox">
                        <div class="tag" style="background-color: {{ tag.color }}"
                             ng-repeat="tag in filters.statuses"
                             ng-click="ctrl.toggleFilter(tag)"
                             ng-class="{selected: ctrl.isFilterSelected(tag)}">
                            <div class="name">{{ tag.name }}</div>
                            <div class="count">{{ tag.count }}</div>
                        </div>
                    </div>
                </li>
                <li ng-show="filters.types.length > 0">
                    <h3 i18next="issues.type">Type:</h3>
                    <div class="tags-list-sbox">
                        <div class="tag" style="background-color: {{ tag.color }}"
                             ng-repeat="tag in filters.types"
                             ng-click="ctrl.toggleFilter(tag)"
                             ng-class="{selected: ctrl.isFilterSelected(tag)}" >
                            <div class="name">{{ tag.name }}</div>
                            <div class="count">{{ tag.count }}</div>
                        </div>
                    </div>
                </li>
                <li ng-show="filters.severities.length > 0">
                    <h3 i18next="issues.severity">Severity:</h3>
                    <div class="tags-list-sbox">
                        <div class="tag" style="background-color: {{ tag.color }}"
                             ng-repeat="tag in filters.severities"
                             ng-click="ctrl.toggleFilter(tag)"
                             ng-class="{selected: ctrl.isFilterSelected(tag)}" >
                            <div class="name">{{ tag.name }}</div>
                            <div class="count">{{ tag.count }}</div>
                        </div>
                    </div>
                </li>
                <li ng-show="filters.priorities.length > 0">
                    <h3 i18next="issues.priority">Priority:</h3>
                    <div class="tags-list-sbox">
                        <div class="tag" style="background-color: {{ tag.color }}"
                             ng-repeat="tag in filters.priorities"
                             ng-click="ctrl.toggleFilter(tag)"
                             ng-class="{selected: ctrl.isFilterSelected(tag)}">
                            <div class="name">{{ tag.name }}</div>
                            <div class="count">{{ tag.count }}</div>
                        </div>
                    </div>
                </li>
                <!-- <li ng-show="addedByTags.length>1"> -->
                <!--     <h3 i18next="issues.added-by">Added by:</h3> -->
                <!--     <div class="tags-list-sbox"> -->
                <!--         <div class="tag" ng-repeat="tag in addedByTags" ng-click="ctrl.toggleTag(tag)" -->
                <!--                 ng-class="{selected: ctrl.isFilterSelected(tag)}"> -->
                <!--             <div class="name" gm-colorize-user="constants.users[tag.id]"> -->
                <!--                 {{ tag.name }} -->
                <!--             </div> -->
                <!--             <div class="count">{{ tag.count }}</div> -->
                <!--         </div> -->
                <!--     </div> -->
                <!-- </li> -->
                <li>
                    <h3 i18next="issues.assigned-to">Assigned to:</h3>
                    <div class="tags-list-sbox">
                        <div class="tag" ng-repeat="tag in filters.assignedTo"
                             ng-click="ctrl.toggleFilter(tag)"
                             ng-class="{selected: ctrl.isFilterSelected(tag)}">
                            <div class="name" gm-colorize-user="constants.users[tag.id]">
                                {{ tag.name }}
                            </div>
                            <div class="count">{{ tag.count }}</div>
                        </div>
                    </div>
                </li>
                <li>
                    <h3 i18next="issues.tags">Tags:</h3>
                    <div class="tags-list-sbox">
                        <div class="tag" ng-repeat="tag in filters.tags track by $index"
                             ng-click="ctrl.toggleFilter(tag)"
                             ng-class="{selected: ctrl.isFilterSelected(tag)}" gm-colorize-tag="tag">
                            <div class="name">{{ tag.name }}</div>
                            <div class="count">{{ tag.count }}</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="filters-selected-box"></div>
    </div>

    <div class="issues-container">
        <div class="issues-table-list">
            <div class="flex-header">
                <div i18next="issues.severity-header"
                     class="issue-sortable-field issue-severity"
                     ng-model="ctrl.ordering"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="severity">
                    Severity
                </div>
                <div class="issue-info-icons"></div>
                <div i18next="issues.subject-header"
                     class="issue-sortable-field issue-title"
                     ng-model="ctrl.ordering"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="subject">
                    Subject
                </div>
                <div i18next="issues.added-by-header"
                     class="issue-sortable-field issue-added-by"
                     ng-model="ctrl.ordering"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="owner">
                    Added by
                </div>
                <div i18next="issues.created-date-header"
                     class="issue-sortable-field issue-created-date"
                     ng-model="ctrl.ordering"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="created_date">
                    Created
                </div>
                <div i18next="issues.modified-date-header"
                     ng-model="ctrl.ordering"
                     class="issue-sortable-field issue-modified-date"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="modified_date">
                    Modified
                </div>
                <div i18next="issues.status-header"
                     class="issue-sortable-field issue-state"
                     ng-model="ctrl.ordering"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="status">
                    Status
                </div>
                <div i18next="issues.priority-header"
                     class="issue-sortable-field issue-priority"
                     ng-model="ctrl.ordering"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="priority">
                    Priority
                </div>
                <div i18next="issues.assigned-to-header"
                     class="issue-sortable-field issue-assigned-to"
                     ng-model="ctrl.ordering"
                     gm-refresh-callback="ctrl.refreshIssues()"
                     gm-issues-sorted-by="assigned_to">
                    Assigned to
                </div>

                <div i18next="issues.options" class="issue-options">Options</div>
            </div>
            <div class="flex-separator"></div>
            <div class="flex-body">
                <div class="empty" ng-show="issues.length == 0">
                    There aren't issues to show.
                </div>
                <div class="issue-item" ng-repeat="issue in issues" ng-dblclick="ctrl.openIssue(projectSlug, issue.ref)">
                    <div class="issue-severity">
                        <a href="" gm-generic-choice-popover="ctrl.updateIssueSeverity(issue, selectedId)"
                           gm-popover-class-name="severity-popover"
                           gm-popover-title="issues.select-severity-popover"
                           gm-popover-model="constants.severitiesList"
                           class="severity-{{ constants.severities[issue.severity].name|lowercase }}">
                            {{ constants.severities[issue.severity].name|lowercase }}
                        </a>
                    </div>
                    <div class="issue-info-icons">
                        <a href="" ng-show="issue.attachments"
                           gm-template-popover="attachments-popover"
                           gm-popover-model="issue">
                            <span data-icon="E"></span>
                        </a>
                    </div>
                    <div class="issue-title">
                        <a class="title" href="{{ urls.issuesUrl(projectSlug, issue.ref, false, ctrl.issuesQueryParams()) }}">
                            #{{ issue.ref }} {{ issue.subject }}
                        </a>
                        <div class="tags" ng-show="showTags">
                            <span ng-repeat="tag in issue.tags" class="label" gm-colorize-tag="tag">{{ tag }}</span>
                        </div>
                    </div>

                    <div class="issue-added-by">
                        <span gm-colorize-user="constants.users[issue.owner]">
                             {{ constants.users[issue.owner].full_name }}
                        </span>
                    </div>

                    <div class="issue-created-date">
                        <span>{{ issue.created_date|momentFormat:"lll" }}</span>
                    </div>

                    <div class="issue-modified-date">
                        <span>{{ issue.modified_date|momentFormat:"lll" }}</span>
                    </div>
                    <div class="issue-state">
                        <a href=""
                           gm-generic-choice-popover="ctrl.updateIssueStatus(issue, selectedId)"
                           gm-popover-class-name="status-popover"
                           gm-popover-title="issues.select-status-popover"
                           gm-popover-model="constants.issueStatusesList">
                            {{ constants.issueStatuses[issue.status].name }}
                        </a>

                        <span data-icon="o" class="icon blocked" ng-show="issue.is_blocked"
                              gm-wiki-preview-popover=""
                              gm-popover-model="issue.blocked_note_html"
                              gm-popover-class-name="issue-blocked-popover"
                              gm-popover-title="issues.blocking-reasons-popover">
                        </span>
                    </div>
                    <div class="issue-priority">
                        <a href=""
                           gm-generic-choice-popover="ctrl.updateIssuePriority(issue, selectedId)"
                           gm-popover-class-name="priority-popover"
                           gm-popover-title="issues.select-priority-popover"
                           gm-popover-model="constants.prioritiesList"
                           class="priority-{{ constants.priorities[issue.priority].name|lowercase }}">
                            {{ constants.priorities[issue.priority].name }}
                        </a>
                    </div>
                    <div class="issue-assigned-to">
                        <div class="button-item" ng-show="issue.assigned_to" >
                            <i class="icon-user"></i>
                            <a href=""
                               gm-user-choice-popover="ctrl.updateIssueAssignation(issue, selectedId)"
                               gm-popover-class-name="developers-popover"
                               gm-popover-title="issues.select-user-popover"
                               gm-popover-model="project.active_memberships"
                               gm-popover-model-transformer="membersToChoicesTransformer"
                               gm-popover-empty-item="issues.unassigned-popover">

                               <span gm-colorize-user="constants.users[issue.assigned_to]">
                                   {{ constants.users[issue.assigned_to].full_name }}
                               </span>

                            </a>
                        </div>
                        <div class="button-item" ng-show="!issue.assigned_to">
                            <i class="icon-question-sign"></i>
                            <a href=""
                               gm-user-choice-popover="ctrl.updateIssueAssignation(issue, selectedId)"
                               gm-popover-class-name="developers-popover"
                               gm-popover-title="issues.select-user-popover"
                               gm-popover-model="project.active_memberships"
                               gm-popover-model-transformer="membersToChoicesTransformer"
                               gm-popover-empty-item="issues.unassigned-popover">

                                <span i18next="issues.unassigned">Unassigned</span>
                            </a>
                        </div>
                    </div>
                    <div class="issue-options extra-options">
                        <a data-icon="l" class="btn-small-preview option"
                           gm-template-popover="issue-preview-popover"
                           gm-popover-model="issue">
                            <span class="help-box" i18next="issues.preview">Preview</span>
                        </a>
                        <a data-icon="j" class="btn-small-edit option" ng-click="ctrl.openEditIssueForm(issue)">
                            <span class="help-box" i18next="issues.edit">Edit</span>
                        </a>
                        <a data-icon="h" class="btn-small-remove option"
                           gm-generic-dialog-popover="ctrl.removeIssue(issue)"
                           gm-popover-model="issue"
                           gm-popover-title-bind="'issues.issue-delete-sure'|i18next:{subject: issue.subject}">
                            <span class="help-box" i18next="issues.remove">Remove</span>
                        </a>
                    </div>
                </div>
            </div>
            <div gm-paginator></div>
        </div>
    </div>
</div>

<div ng-show="formOpened" ng-controller="IssuesModalController as modalCtrl" gm-modal="issue-form">
    <div class="new-issue-modal modal">
        <form class="inline-form issue-form" gm-checksley-form="modalCtrl.submit()">
            <div class="modal-header" ng-switch on="context.type">
                <h3 ng-switch-when="create" i18next="issues.create-issue">Create issue</h3>
                <h3 ng-switch-when="edit" i18next="issues.modify-issue">Modify issue</h3>
            </div>
            <div class="modal-body">
                <fieldset class="fieldset-row">
                    <label i18next="issues.form-subject">Subject</label>
                    <input name="subject" class="subject" type="text" data-required="true"
                        ng-model="form.subject" data-maxlength="500"></input>
                </fieldset>
                <div class="fieldset-row">
                    <fieldset class="type">
                        <label i18next="issues.form-type">Type</label>
                        <select name="type" ng-model="form.type" data-required="true"
                            data-error-message="Required"
                            ng-options="c.id as c.name for c in constants.issueTypesList|orderBy:'order'"></select>
                        </select>
                    </fieldset>
                    <fieldset class="priority">
                        <label i18next="issues.form-priority">Priority</label>
                        <select name="priority" ng-model="form.priority"
                            data-required="true" data-error-message="Required"
                            ng-options="c.id as c.name for c in constants.prioritiesList|orderBy:'order'"></select>
                        </select>
                    </fieldset>
                    <fieldset class="severity">
                        <label i18next="issues.form-severity">Severity</label>
                        <select name="severity" ng-model="form.severity"
                            data-required="true" data-error-message="Required"
                            ng-options="c.id as c.name for c in constants.severitiesList|orderBy:'order'"></select>
                        </select>
                    </fieldset>
                </div>
                <fieldset class="fieldset-row">
                    <label i18next="issues.form-assigned-to">Assigned to</label>
                    <select name="assigned_to"
                            ng-model="form.assigned_to"
                            ui-select2="assignedToSelectOptions"
                            data-error-message="Required">
                        <option value="" i18next="issues.form-unassigned">Unassigned</option>
                        <option ng-repeat="m in project.active_memberships" value="{{ m.user }}">
                            {{ m.full_name }}
                        </option>
                    </select>
                </fieldset>
                <div class="fieldset-row">
                    <fieldset class="status">
                        <label i18next="issues.form-status">Status</label>
                        <select name="status" ng-model="form.status" data-required="true"
                            data-type="number" data-error-message="Required"
                            ng-options="c.id as c.name for c in constants.issueStatusesList|orderBy:'order'"></select>
                        </select>
                    </fieldset>
                    <fieldset class="is-blocked icons">
                        <input type="checkbox"id="is-blocked" class="hidden"
                               ng-model="form.is_blocked" name="is_blocked">
                        <label for="is-blocked">
                            <span data-icon="o" class="icon blocked"></span>
                            <span i18next="issues.form-is-blocked">Is blocked</span>
                        </label>
                    </fieldset>
                </div>
                <div class="fieldset-row">
                    <fieldset ng-show="form.is_blocked">
                        <label i18next="issues.form-blocking-reasons">Reasons for blocking</label>
                        <textarea class="blocked-note" name="blocked_note"
                                  placeholder="Some reasons..."
                                  i18next="placeholder:issues.form-blocking-reasons-placeholder"
                                  ng-model="form.blocked_note" gm-markitup preview-id="blocked-preview"></textarea>
                        <div id="blocked-preview" class="preview"></div>
                    </fieldset>
                </div>
                <div class="fieldset-row">
                    <fieldset>
                        <label i18next="issues.form-tags">Tags</label>
                        <input type="text" name="tags"
                               ng-model="form.tags" ui-select2="tagsSelectOptions"
                               data-placeholder="{{ 'issues.form-tags-placeholder'|i18next }}" />
                    </fieldset>
                </div>
                <div class="fieldset-row">
                    <fieldset>
                        <label i18next="issues.form-description">Description</label>
                        <textarea name="description" class="description" ng-model="form.description" gm-markitup preview-id="preview"></textarea>
                        <div id="preview" class="preview"></div>
                    </fieldset>
                </div>
                <div class="fieldset-row">
                    <fieldset>
                        <ul class="attachments-items">
                            <li class="attachments-item"
                                ng-repeat="attachment in attachments">
                                <a class="delete" data-icon="h" href=""
                                   title="Delete the new attachment"
                                   i18next="title:issue.delete-new-attachment"
                                   ng-click="modalCtrl.removeAttachment(attachment)"></a>
                                <span>{{ attachment.name }}</span>
                                <span>[{{ attachment.size|sizeFormat }}]</span>
                            </li>
                        </ul>
                        <a class="add-attachment" data-icon="E" title="Add attachments"
                            gm-forward-click="#attachment_file_input" href=""
                            i18next="title:issue.add-attachments,issue.add-attachments">
                            Add attachments
                        </a>
                        <ul class="attachments-items">
                            <li class="attachments-item"
                                ng-repeat="attachment in newAttachments">
                                <a class="delete" data-icon="h" href=""
                                   title="Delete the new attachment"
                                   i18next="title:issue.delete-new-attachment"
                                   ng-click="modalCtrl.removeNewAttachment(attachment)"></a>
                                <span>{{ attachment.name }}</span>
                                <span>[{{ attachment.size|sizeFormat }}]</span>
                            </li>
                        </ul>
                        <input type="file" class="hidden" name="newAttachments"
                               id="attachment_file_input" multiple="multiple"
                               gm-files="newAttachments"/>
                    </fieldset>
                </div>
            </div>
            <div class="modal-footer">
                <div gm-spinner class="spinner-container"></div>
                <input type="submit" gm-checksley-submit-button class="button button-success" value="Save"  i18next="value:issues.form-save"/>
                <a href="" class="button button-cancel" ng-click="modalCtrl.close()" i18next="issues.form-close">Close</a>
            </div>
        </form>
    </div>
</div>

<script type="text/ng-template" id="attachments-popover">
    <div class="issue-attachments-popover">
        <section ng-show="issue.attachments">
            <strong i18next="issues.attachments-popover">Attachments:</strong>
            <ul class="attachments-items">
                <li class="attachments-item" ng-repeat="attachment in issue.attachments">
                    <a href="{{ attachment.url }}" target="_blank">{{ attachment.name }}</a>
                    <span>[{{ attachment.size|sizeFormat }}]</span>
                </li>
            </ul>
        </section>
    </div>
</script>

<script id="issue-preview-popover" type="text/ng-template">
    <div>
        <div class="issue-preview-popover btn-accept">
            <section>
                <strong i18next="issues.id-popover">ID:</strong> #{{ issue.ref }}
            </section>
            <section>
                <strong i18next="issues.created-by-popover">Created by:</strong><br />
                <span gm-colorize-user="constants.users[issue.owner]">{{ constants.users[issue.owner].full_name }}</span>
            </section>
            <section>
                <strong i18next="issues.subject-popover">Subject:</strong><br />{{ issue.subject }}
            </section>
            <section>
                <strong i18next="issues.description-popover">Description:</strong>
                <div ng-bind-html="issue.description_html"></div>
            </section>
            <section ng-show="issue.attachments">
                <strong i18next="issues.attachments-popover">Attachments:</strong>
                <ul class="attachments-items">
                    <li class="attachments-item" ng-repeat="attachment in issue.attachments">
                        <a href="{{ attachment.url }}" target="_blank">{{ attachment.name }}</a>
                    <span>[{{ attachment.size|sizeFormat }}]</span>
                    </li>
                </ul>
            </section>
        </div>
    </div>
</script>


